<template>
  <div>
    <my-upload
      v-model="show"
      :field="field"
      :width="width"
      :height="height"
      :url="action"
      :params="data"
      img-format="png"
      @crop-success="cropSuccess"
      @crop-upload-success="cropUploadSuccess"
      @crop-upload-fail="cropUploadFail"
    />
  </div>
</template>

<script>
import myUpload from 'vue-image-crop-upload'
export default {
  name: 'Upload',
  components: {
    myUpload
  },
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    action: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 300
    },
    field: {
      type: String,
      default: 'file'
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      image: '',
      show: false
    }
  },
  watch: {
    isShow(newValue) {
      this.show = newValue
    },
    show(newValue) {
      this.$emit('onShow', newValue)
    }
  },
  methods: {
    cropSuccess(imgDataUrl) {
      this.image = imgDataUrl
    },
    cropUploadSuccess(jsonData) {
      // this.show = false
      this.$emit('onUpload', jsonData)
    },
    cropUploadFail(status) {
      if (status) {
        this.$emit('onFail', true)
      } else {
        this.$emit('onFail', false)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .avatar{
    padding-top: 10px;
  }
</style>
